Animated sort and filter DOM elements with Isotope

Animated sorting and filtering DOM elements is what isotope.js does.

See the working demo below.

Demo: Animated sorting and filtering DOM elements

It works by sorting divs from their class names - just add custom class names according to need like this - class="jazz ". Add your filter to the buttons like this - data-filter=".jazz"

You can 'get into it' and search AND/OR too (see getSortData in init) but I'll leave that to another day!

JavaScript

This is pretty much the standard JavaScript you'll paste into your page script block - or in a .js file if you prefer.

             
    // init Isotope
    var $grid = $('.grid').isotope({
        itemSelector: '.element-item',
        layoutMode: 'fitRows',
        getSortData: {
            name: '.name',
            symbol: '.symbol',
            year: '.year parseInt',
            category: '[data-category]',
            weight: function (itemElem) {
                var weight = $(itemElem).find('.weight').text();
                return parseFloat(weight.replace(/[\(\)]/g, ''));
            }
        }
    });

    // Isotope filter functions
    var filterFns = {
        // show if year is greater than 50
        yearGreaterThan50: function () {
            var year = $(this).find('.year').text();
            return parseInt(year, 10) > 50;
        },
        // show if name ends with -ium
        ium: function () {
            var name = $(this).find('.name').text();
            return name.match(/ium$/);
        }
    };

    // Isotope bind filter button click
    $('#filters').on('click', 'button', function () {
        var filterValue = $(this).attr('data-filter');
        // use filterFn if matches value
        filterValue = filterFns[filterValue] || filterValue;
        $grid.isotope({ filter: filterValue });
    });

    // Isotope bind sort button click
    $('#sorts').on('click', 'button', function () {
        var sortByValue = $(this).attr('data-sort-by');
        $grid.isotope({ sortBy: sortByValue });
    });

    // Isotope change is-checked class on buttons
    $('.button-group').each(function (i, buttonGroup) {
        var $buttonGroup = $(buttonGroup);
        $buttonGroup.on('click', 'button', function () {
            $buttonGroup.find('.is-checked').removeClass('is-checked');
            $(this).addClass('is-checked');
        });
    });

        
    

CSS

This is mostly styling for the buttons, you can chop out much of it if not necessary.

           
    body {
        background-color: grey;
        font-family: Helvetica, Arial, sans-serif;
        line-height: 1.6;
        font-size: 9px;
    }

    /* ---- button ---- */

    .button {
      display: inline-block;
      padding: 0.5em 1.0em;
      background: #EEE;
      border: none;
      border-radius: 7px;
      background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
      color: #222;
      font-family: sans-serif;
      font-size: 16px;
      text-shadow: 0 1px white;
      cursor: pointer;
    }

    .button:hover {
      background-color: #8CF;
      text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
      color: #222;
    }

    .button:active,
    .button.is-checked {
      background-color: #28F;
    }

    .button.is-checked {
      color: white;
      text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
    }

    .button:active {
      box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
    }

    /* ---- button-group ---- */

    .button-group {
      margin-bottom: 20px;
    }

    .button-group:after {
      content: '';
      display: block;
      clear: both;
    }

    .button-group .button {
      float: left;
      border-radius: 0;
      margin-left: 0;
      margin-right: 1px;
    }

    .button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
    .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

    /* ---- isotope ---- */

    .grid {
      border: 1px solid #333;
    }

    /* clear fix */
    .grid:after {
      content: '';
      display: block;
      clear: both;
    }

    /* ---- .element-item ---- */

    .element-item {
      position: relative;
      float: left;
      width: 100px;
      height: 100px;
      margin: 5px;
      padding: 10px;
      background: #888;
      color: #262524;
    }

    .element-item > * {
      margin: 0;
      padding: 0;
    }
        
    

Conclusion

Isotope is a powerful JavaScript framework for animated sort and filter dom elements with isotope